<!-- 模板 -->
<template>
  <div class="case-root">
    <!-- 1、页头 -->
    <van-row class="header-warp animated bounceInDown" ref="header-warp">
      <van-col span="24">
        <img :src="logo" alt="" class="logo" />
        <van-icon
          class="user-circle"
          name="user-circle-o"
          size="0.6rem"
          @click="goLogin"
        />
      </van-col>
    </van-row>
    <!-- 2、搜索框 -->
    <van-row class="search-warp animated bounceInLeft">
      <van-icon name="search" size=".6rem" />
      <input
        type="text"
        v-model="pageInfo.name"
        @input="getFit()"
        placeholder="输入搜索内容"
      />
    </van-row>
    <!-- 3、下拉标签 -->
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="pageInfo.houseType"
        :options="option1"
        @change="getFitCases()"
      />
      <van-dropdown-item
        v-model="pageInfo.fitType"
        :options="option2"
        @change="getFitCases()"
      />
      <van-dropdown-item
        v-model="pageInfo.area"
        :options="option3"
        @change="getFitCases()"
      />
      <van-dropdown-item
        v-model="pageInfo.price"
        :options="option4"
        @change="getFitCases()"
      />
    </van-dropdown-menu>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
      pulling-text
    >
      <!-- 4、查询到的数据列表 -->
      <van-row class="list-warp">
        <van-col
          class="wow bounceInLeft"
          span="24"
          v-for="(item, index) in caselist"
          :key="index"
        >
          <van-image style="width: 100%" :src="item.img"></van-image>
          <div class="content">
            <div class="title">{{ item.name }}</div>
            <div class="desc">
              <div class="house_type">{{ item.house_type }}</div>
              <div class="fit_type">{{ item.fit_type }}</div>
              <div class="area">{{ item.area + 'm²' }}</div>
              <div class="price">{{ item.price / 10000 + 'w元' }}</div>
              <div class="views"><van-icon name="eye-o" />{{ item.views }}</div>
            </div>
          </div>
        </van-col>
      </van-row>
    </van-pull-refresh>
    <!-- 5、  -->
    <van-row class="back-top" v-if="show" @click="backTop">
      <van-icon name="back-top" />
    </van-row>
    <!-- 6、页脚tabbar导航条 -->
    <Tabbar :active="2"></Tabbar>
  </div>
</template>

<script>
import { request } from '../utils/request'
import logo from '../assets/img/logo.png'
import Tabbar from './Tabbar.vue'
export default {
  name: '',
  data() {
    return {
      isLoading: false,
      logo,
      option1: [
        { text: '户型', value: '户型' },
        { text: '二居室', value: '二居室' },
        { text: '三居室', value: '三居室' },
        { text: '四居室', value: '四居室' },
        { text: '别墅', value: '别墅' },
        { text: '复式', value: '复式' },
        { text: '大户型', value: '大户型' },
        { text: '小户型', value: '小户型' },
        { text: '平层', value: '平层' },
        { text: 'loft', value: 'loft' },
      ],
      option2: [
        { text: '风格', value: '风格' },
        { text: '现代', value: '现代' },
        { text: '中式', value: '中式' },
        { text: '美式', value: '美式' },
        { text: '轻奢', value: '轻奢' },
        { text: '北欧', value: '北欧' },
        { text: '简约', value: '简约' },
        { text: '法式', value: '法式' },
        { text: '混搭', value: '混搭' },
        { text: '欧式', value: '欧式' },
        { text: '新中式', value: '新中式' },
        { text: '新古典', value: '新古典' },
        { text: '地中海', value: '地中海' },
        { text: '田园', value: '田园' },
        { text: '宜家', value: '宜家' },
        { text: '日式', value: '日式' },
      ],
      option3: [
        { text: '面积', value: '面积' },
        { text: '50', value: '50' },
        { text: '60', value: '60' },
        { text: '70', value: '70' },
        { text: '80', value: '80' },
        { text: '90', value: '90' },
        { text: '100', value: '100' },
        { text: '110', value: '110' },
        { text: '120', value: '120' },
        { text: '140', value: '140' },
        { text: '150', value: '150' },
        { text: '160', value: '160' },
        { text: '200', value: '200' },
      ],
      option4: [
        { text: '造价', value: '造价' },
        { text: '5w', value: '50000' },
        { text: '6w', value: '60000' },
        { text: '7w', value: '70000' },
        { text: '8w', value: '80000' },
        { text: '9w', value: '90000' },
        { text: '10w', value: '100000' },
        { text: '11w', value: '110000' },
        { text: '12w', value: '120000' },
        { text: '20w', value: '200000' },
      ],
      pageInfo: {
        page: 1,
        rows: 10,
        houseType: '户型',
        fitType: '风格',
        area: '面积',
        price: '造价',
        name: '',
      },
      caselist: [],
      total: 0,
      totalPage: 0,
      show: false,
      wow: null,
      id: 0,
      scrollTop: 0,
      id1: 0,
    }
  },
  components: { Tabbar },
  methods: {
    getFit() {
      if (this.id) {
        clearTimeout(this.id)
      }
      let that = this
      this.id = setTimeout(function () {
        that.getFitCases()
      }, 2000)
    },
    onRefresh() {
      //重置查询条件
      this.pageInfo = {
        page: 1,
        rows: 10,
        houseType: '户型',
        fitType: '风格',
        area: '面积',
        price: '造价',
        name: '',
      }
      this.caselist = []
      this.total = 0
      this.totalPage = 0
      this.getCases()
      this.isLoading = false
    },
    //查询条件变化时重新加载数据
    getFitCases() {
      this.caselist = []
      this.total = 0
      this.totalPage = 0
      this.pageInfo.page = 1
      this.getCases()
    },
    //返回顶端
    backTop() {
      // let top = this.$refs['header-warp'].$el
      // console.log(top)
      // top.scrollIntoView({ behavior: 'smooth' })
      if (this.id1) {
        clearInterval(this.id1)
      }
      let num = this.scrollTop
      let that = this
      this.id1 = setInterval(function () {
        num -= 20
        if (num <= 0) {
          clearInterval(that.id1)
        }
        window.scroll(0, num)
      }, 1)
      console.log(this.scrollTop)
    },
    //返回登录
    goLogin() {
      sessionStorage.clear()
      this.$router.push('/')
    },
    //请求列表数据
    async getCases() {
      let data = {
        page: this.pageInfo.page,
        rows: this.pageInfo.rows,
        houseType:
          this.pageInfo.houseType === '户型' ? '' : this.pageInfo.houseType,
        fitType: this.pageInfo.fitType === '风格' ? '' : this.pageInfo.fitType,
        area: +(this.pageInfo.area === '面积' ? 0 : this.pageInfo.area),
        price: +(this.pageInfo.price === '造价' ? 0 : this.pageInfo.price),
        name: this.pageInfo.name,
      }
      let options = {
        url: 'caselist',
        type: 'get',
        data,
      }
      let { data: res } = await request(options)
      console.log(res)
      if (res.code !== 200) {
        return this.$dialog.alert({ title: '提示', message: res.msg })
      }
      //保存列表数据
      this.total = res.data.count
      this.totalPage = Math.ceil(res.data.count / this.pageInfo.rows)
      this.caselist = [...this.caselist, ...res.data.rows]
    },
    //监听窗口滚动
    async windowScroll() {
      // 滚动条距离页面顶部的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.scrollTop = scrollTop
      //获得视口高度
      let clientHeight = document.documentElement.clientHeight
      //获得文档的高度
      let docHeight = parseInt(
        getComputedStyle(document.documentElement, null).height
      )
      console.log(scrollTop, clientHeight, docHeight)
      //判断滚动的距离
      if (scrollTop > 200) {
        //返回顶端显示
        this.show = true
      } else {
        //返回顶端隐藏
        this.show = false
      }
      if (clientHeight + scrollTop >= docHeight) {
        if (this.pageInfo.page >= this.totalPage) {
          return this.$toast('最后一页')
        }
        this.pageInfo.page++
        //异步请求数据加载结束时执行动画效果
        await this.getCases()
        this.wow = new this.WOW({ live: false })
        this.wow.init()
      }
    },
  },
  created() {
    this.getCases()
  },
  mounted() {
    window.addEventListener('scroll', this.windowScroll, true)
  },
  watch: {
    // caselist() {
    //   new this.WOW({
    //     live: false,
    //   }).init()
    // },ak:
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.windowScroll, true)
    console.log('beforeDestroy case')
  },
}
</script>

<style lang="less" scoped>
.case-root {
  background-color: #7be2d4;
  margin-bottom: 1.3rem;
}
// 1头部
.header-warp {
  border-bottom: 1px solid #fff;
  .van-col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem;
    .user-circle {
      color: #fff;
    }
    .logo {
      width: 1.5rem;
      animation: heartBt 2s linear infinite;
    }
  }
}
//2搜索框
.search-warp {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4rem;
  position: relative;
  padding: 0.2rem 0;
  .van-icon {
    position: absolute;
    left: 5%;
    color: #727674;
  }
  input {
    width: 95%;
    height: 0.8rem;
    border-radius: 0.4rem;
    border: none;
    outline: none;
    padding-left: 0.9rem;
  }
}

//3、案例列表
.list-warp {
  background-color: #fff;
  padding: 0.4rem;
  color: #727674;
  .van-col {
    margin-bottom: 0.4rem;
    box-shadow: 0px 0px 5px #888888;
    .title {
      font-size: 0.4rem;
      padding: 0.2rem 0.4rem 0.1rem;
      font-weight: 700;
      color: #575757;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .desc {
      font-size: 0.3rem;
      padding: 0.1rem 0.4rem 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .views {
        display: flex;
        align-items: center;
      }
    }
  }
}

//4、回到顶端
.back-top {
  position: fixed;
  bottom: 1.5rem;
  right: 0.5rem;
  z-index: 1;
  background-color: rgb(196, 193, 193);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
